<template>
	<view class="shop-wrapper">
		<view class="shop-top-search flex-c-s">
			<view class="shop-top-search-wrapper flex-c">
				<uni-icons type="search" class="shop-search-icon" color="#bababa" size="34rpx"></uni-icons>
				<input type="text" v-model="keyword" confirm-type="search" @confirm="goodsList" class="shop-input" placeholder="输入商品名称" />
			</view>
		</view>
		<view class="shop-goods-bar-wrapper flex-c">
			<view class="shop-category">
				<view class="category-item" v-for="(item,index) in category" :key="item.id"
				:class="[index === currentCategory ? 'active-category' : '']" @click="toggleCategory(index)">
					{{ item.name }}
				</view>
			</view>
			<view class="category-goods-wrapper">
				<scroll-view class="right-scroll-view" scroll-y="true" :scroll-into-view="toView" :scroll-with-animation="true" >
					<view class="shop-goods-list flex-c" >
						<!-- <view class="shop-goods-item" v-for="(item, index) in 8" :key="item" :class="[ (index > 0 && (index + 1) % 3 == 0) ? 'clear-m' : '']">
							<image class="shop-item-img" src="/static/images/goods.png" mode="scaleToFill"></image>
							<view class="shop-goods-name text-flemp1">
								{{ item }}
							</view>
						</view> -->
						<Category1 :categoryList="categoryList" @categoryTap="categoryTap" />
						<!-- <Category2 v-show="currentCategory === 1" />
						<Category3 v-show="currentCategory === 2" />
						<Category4 v-show="currentCategory === 3" />
						<Category5 v-show="currentCategory === 4" />
						<Category6 v-show="currentCategory === 5" /> -->
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { onReady } from '@dcloudio/uni-app'

import { getShopCategory } from '@/http/shop' 

import type { IShopCategory } from '@/types'

import Category1 from '@/pages/shopPackge/categoryComponents/Category1.vue'
// import Category2 from '@/pages/shopPackge/categoryComponents/Category2.vue'
// import Category3 from '@/pages/shopPackge/categoryComponents/Category3.vue'
// import Category4 from '@/pages/shopPackge/categoryComponents/Category4.vue'
// import Category5 from '@/pages/shopPackge/categoryComponents/Category5.vue'
// import Category6 from '@/pages/shopPackge/categoryComponents/Category6.vue'

type TCategory = {name: string, id: number}

export default defineComponent({
	components: {
		Category1, // Category2, Category3, Category4, Category5, Category6
	},
	setup() { 
		const state = reactive({
			currentCategory: 0,
			category: [
				// { id: 1, name: '男性用品' },
				// { id: 2, name: '女性用品' },
				// { id: 3, name: '情趣内衣' }, 
				// { id: 5, name: '安全避孕' },
				// { id: 6, name: '避孕验孕' }, 
			] as Array<TCategory>,
			toView: 'categoryNode1',
			categoryList: [] as Array<IShopCategory>,
			keyword: ''
		})
		onReady(() => {
			getShopGoodsCategory()
		})
		const toggleCategory = (index: number) => {
			state.currentCategory = index
			state.toView = `categoryNode${index+1}`
		}
		const goodsList = () => { 
			uni.navigateTo({
				url: `/pages/shopPackge/goodsList/index?keyword=${state.keyword}&businessType=1&cId=0`
			}) 
		}
		
		const getShopGoodsCategory = async () => {
			let res = await getShopCategory()
			if(res.code === 0) {
				if(res.data?.length) {
					state.categoryList = res.data || [];
					state.category = state.categoryList.map(item => ({name: item.categoryName, id: item.id}))
				} 
			}
			
		}
		const categoryTap = (id: number) => { 
			uni.navigateTo({
				url: `/pages/shopPackge/goodsList/index?keyword=${state.keyword}&businessType=1&cId=${id}`
			})
		}
		return { 
			goodsList,
			toggleCategory,
			categoryTap,
			...toRefs(state)
		}
	}
})
</script>
<style>
	page{ background: #f8f8fa; }
</style>
<style lang="scss" scoped>
.shop-wrapper {
	.shop-top-search{
		height: 92rpx;
		background-color: #fff;
		padding: 0 16rpx;
		.shop-top-search-wrapper{
			flex: 1; 
			background: #f8f8fa;
			border-radius: 10rpx;
			.shop-search-icon{
				margin: 0 20rpx;
			}
			.shop-input{
				flex: 1; 
				height: 66rpx;
				font-size: 26rpx; 
				box-sizing: border-box;
				margin-right: 20rpx;
			}
		}
	}
	$contentheight: calc(100vh - 92rpx);
	.shop-goods-bar-wrapper{
		height: $contentheight;
		.shop-category{
			width: 180rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: $contentheight;
			.category-item{
				width: 148rpx;
				height: 56rpx;
				background: #fff;
				border-radius: 0 28rpx 28rpx 0;
				font-size: 26rpx;
				text-align: center;
				line-height:56rpx;
				margin: 20rpx 0;
			}
			.active-category{
				color: #fff;
				background: #eb5883;
			}
		}
		.category-goods-wrapper{
			height: $contentheight;
			flex: 1;
			.right-scroll-view{
				width: 480rpx;
				height: calc(100vh - 208rpx);
				margin: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 32rpx;
				.shop-goods-list{
					flex-wrap: wrap;
				}
				.shop-goods-item{
					width: 116rpx;
					margin-right: 54rpx;
					margin-bottom: 48rpx;
					box-sizing: border-box;
					.shop-item-img{
						width: 116rpx;
						height: 116rpx;
						border-radius: 16rpx;
					}
					.shop-goods-name{
						font-size: 26rpx;
						text-align: center;
						margin-top: 10rpx;
					}
					
				}
				.clear-m{
					margin-right: 0px !important;
				}
			}
		}
	}
}

</style>
